<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易信息</span>
      </div>

      <el-table :data="tableData" max-height="300" border style="width: 100%">
        <el-table-column prop="saler_did" label="售电方数字身份" width="180">
        </el-table-column>
        <el-table-column prop="buyer_did" label="购电方数字身份" width="180">
        </el-table-column>
        <el-table-column prop="quantity" label="数量（度）"> </el-table-column>
        <el-table-column prop="price" label="价格（元）"> </el-table-column>
        <el-table-column prop="created_at" label="交易时间"> </el-table-column>
        <el-table-column prop="txid" label="区块链交易ID">
          <template slot-scope="scope">
            <span @click="linkTo" class="linkTo">{{ scope.row.g }} </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handleSizeChange="handleSizeChange"
        @handlePageChanged="handlePageChanged"
        :page.sync="page"
        :pageSelect.sync="pageSelect"
        :pageView.sync="pageView"
        :totalElements.sync="totalElements"
      />
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page,
  },
})
export default class MyApplication extends Vue {
  protected tableData: any = [
    {
      a: "of-10000",
      b: "售电",
      c: "10000",
      d: 100,
      e: 0.92,
      f: 90,
      g: "sjksd",
    },

  ];
  protected linkTo(row: any) {
    this.$router.push({ path: "/blockDetail", params: row });
  }
}
</script>

<style lang="scss" scoped>
.linkTo {
  color: #077be8;
}
</style>


